<template>
    <div>
        <Row class-name="header">
            <i-col span="8" class-name="title">
                标题：{{baseData.title}}
            </i-col>
            <i-col span="14" class-name="action"><Button type="primary" @click="previewStatus = true">预览</Button><Button type="warning" @click="save">保存</Button><Button type="error" @click="clear">清空</Button></i-col>
        </Row>
        <Modal v-model="previewStatus" :footer-hide="true" :width="curModel == 'pc'?800:407">
            <Preview v-if="previewStatus" :formconfig="formconfig" :theme="theme" :config="config"></Preview>
        </Modal>
    </div>
</template>
<script>
import { service } from '../../utils/service.js'
export default {
    components: {},
    data() {
        //这里存放数据
        return {};
    },
    //监听属性 类似于data概念
    computed: {
        theme() {
            return "Theme" + this.$store.state.formconfig.themeSelected
        },
        baseData() {
            return this.$store.state.baseData
        },
        formconfig() {
            return this.$store.state.formconfig
        },
        config() {
            return this.$store.state.dataconfig
        },
        curModel() {
            return this.$store.state.curModel;
        },
        previewStatus: {
            get() {
                return this.$store.state.previewStatus;
            },
            set(val) {
                this.$store.state.previewStatus = val;
            }
        }
    },
    //监控data中的数据变化
    watch: {},
    //方法集合,
    methods: {
        save() {
            var that = this

            that.$http.post(service.design_save, { id: that.$store.state.baseData.id, data: JSON.stringify({ formconfig: that.$store.state.formconfig, dataconfig: that.$store.state.dataconfig, linkageEvent: that.$store.state.linkageEvent }) })
                .then(function(response) {

                    if (response.data.code == 1) {
                        that.$Message.success(response.data.msg);

                    } else {

                        that.$Message.error(response.data.msg);
                    }
                })
                .catch(() => {
                    that.$Message.error('网络错误');
                });
        },
        clear() {
            this.$Modal.confirm({
                title: '提示',
                content: '<p>是否确认清空该表单数据？</p>',
                onOk: () => {
                    this.$store.state.dataconfig = []
                    this.$store.state.baseData.config.dataconfig = []
                }
            });

        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {


    }
}
</script>
<style lang="less" scoped>
.header {
    width: 100%;
    height: 64px;
    line-height: 64px;
    font-size: 16px;
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.title {
    font-weight: bold;
    padding-left: 15px;
}

.title-back {
    font-size: 16px !important;
    vertical-align: middle;
}

.action {
    text-align: right;

    button {
        margin-left: 15px;
    }
}
</style>